<template>
  <div style="position: relative">
    <div style="position: absolute; right: 20px; top: 0px">
      <el-tag v-if="form.WFM_Status == 1" type="primary" size="large">
        {{ form.Status }}
      </el-tag>
      <el-tag v-if="form.WFM_Status == 2" type="success" size="large">
        {{ form.Status }}
      </el-tag>
      <el-tag v-if="form.WFM_Status == -1" type="default" size="large">
        {{ form.Status }}
      </el-tag>
      <el-tag v-if="form.WFM_Status == -2" type="danger" size="large">
        {{ form.Status }}
      </el-tag>
    </div>
    <el-radio-group v-model="showStep">
      <el-radio-button label="表单流程"></el-radio-button>
      <el-radio-button label="操作记录"></el-radio-button>
    </el-radio-group>
    <div style="padding: 30px 20px">
      <template v-if="showStep == '表单流程'">
        <step-node
          v-for="(step, ind) in form.FormSteps"
          :isLast="ind == form.FormSteps.length - 1"
          :key="step.FSO_ID"
          :data="step"
          :form="form"
        ></step-node>
      </template>
      <!--div
        v-for="(step, index) in form.FormSteps"
        :key="index"
        style="margin: 10px 5px; background-color: powderblue"
      >
        {{ step.FRS_Name }}
        {{ step.FRS_CreateTime }}
        {{ step.FRS_CheckOneTime ? '自动跳过' : '' }}
        {{ step.FOC_Name }}
        {{ step.FRS_ChoiceDesc }}
        {{ step.MultiOpPassTypeDesc }}
        {{ step.FRS_Score ? '总' + step.FRS_Score + '分' : '' }}

        <div v-for="item in step.OperatorScores" :key="item">
          {{ item.USR_Name }}：{{ item.FSOS_Score }}分
        </div>
        <span v-for="(action, aindex) in step.Actions" :key="aindex">
          【{{ action.BFA_Name }}】
        </span>
        <i
          class="el-icon-star-on"
          v-if="form.CurStep && step.FRS_Guid == form.CurStep.FRS_Guid"
        ></i>
        <span v-for="(choice, cindex) in step.Choices" :key="cindex">
          {{ choice.FSC_OperatorDesc }}
        </span>
        <el-button
          type="text"
          v-if="
            step.FRS_OperatorChoice >= 6 &&
            step.FRS_OperatorChoice <= 8 &&
            !form.WFM_ID
          "
          @click="getChoiceEmployees(step)"
        >
          选择成员
        </el-button>
      </div>
    </template>-->

      <template v-if="showStep == '操作记录'">
        <step-log
          v-for="(log, ind) in form.Operators"
          :isLast="ind == form.Operators.length - 1"
          :key="log.FSO_ID"
          :data="log"
          :form="form"
        ></step-log>
      </template>
    </div>

    <!--  <div
      v-for="log in form.Operators"
      :key="log.FSO_ID"
      style="margin: 10px 5px; background-color: powderblue"
    >
      {{ log.FRS_Name }}
      {{ log.USR_Name }}
      {{ log.FSO_IsChecked ? '' : '待审核' }}
      {{ log.OperateTypeDesc }}
      {{ log.FSO_Comment }}
      {{ log.FSO_CreateTime }}
      <div>
        <a
          v-for="(file, index) in log.Files"
          :key="file.FSOF_ID"
          @click="downloadFile(file)"
        >
          文件{{ index + 1 }}: {{ file.FL_Name }}
        </a>
      </div>
    </div>-->
    <el-dialog
      :visible.sync="chooseEmpVis"
      width="380px"
      title="选择成员"
      :modal-append-to-body="false"
    >
      <el-checkbox
        v-for="(emp, eindex) in emps"
        :key="eindex"
        :value="
          curStep.Choices &&
          curStep.Choices.findIndex(
            (x) => x.FSC_OperatorID == emp.ECV_TargetID
          ) != -1
        "
        @change="
          (ischecked) => {
            empChoose(emp, ischecked)
          }
        "
      >
        {{ emp.USR_Name }}
      </el-checkbox>
    </el-dialog>
  </div>
</template>
<script>
import { baseURL, fileRoot } from '@/config'
import stepLog from './stepLog.vue'
import stepNode from './stepNode.vue'
export default {
  components: { stepLog, stepNode },
  props: ['form'],
  data: function () {
    return {
      fileURL: baseURL + fileRoot,
      emps: [],
      curStep: null,
      chooseEmpVis: false,
      showStep: '操作记录',
    }
  },
  watch: {
    form: {
      immediate: true,
      handler() {
        if (this.form && this.form.FormSteps) {
          let passed = false
          if (this.form.CurStep) {
            passed = true
          }
          if (!this.form.CurStep) {
            this.form.CurStep = this.form.FormSteps[0]
          }

          this.form.FormSteps.forEach((step) => {
            step.status = 1
            if (step.FRS_Guid == this.form.CurStep.FRS_Guid) {
              if (step.TypeDesc == '结束节点') {
                step.status = 3
              } else {
                step.status = 2
              }
              passed = false
            } else {
              step.status = passed ? 3 : 1
            }
          })
        }
      },
    },
  },
  methods: {
    downloadFile(file) {
      var a = document.createElement('a')
      a.setAttribute('download', file.FL_Name)
      a.setAttribute('href', this.fileURL + file.FL_SrcPath)
      a.click() // 设置点击事件
    },
    empChoose(emp, ischecked) {
      if (this.curStep) {
        if (ischecked) {
          if (!this.curStep.Choices) this.curStep.Choices = []
          this.curStep.Choices.push({
            FSC_FormStepGuid: this.curStep.FRS_Guid,
            FSC_OperatorDesc: emp.USR_Name,
            FSC_OperatorID: emp.ECV_TargetID,
          })
        } else {
          this.curStep.Choices.splice(
            this.curStep.Choices.findIndex(
              (x) => x.FSC_OperatorID == emp.ECV_TargetID
            ),
            1
          )
        }
        this.$forceUpdate()
      }
    },
  },
  mounted: function () {
    //this.showStep = this.$route.query.formId ? '操作记录' : '表单流程'
  },
}
</script>